<template>
<el-row class="detail" :gutter="16" v-loading="loading">
  <el-col :span="12">
    <detail-info :showEdit="showEdit" :detail="detail" @getGroupDetail="getGroupDetail"></detail-info>
    <edit-block :showEdit="showEdit" title="Who Is A Good Fit For This Group?" :content.sync="detail.goodFit" @save="submit"></edit-block>
    <edit-block :showEdit="showEdit" title="What Happens Next?" :content.sync="detail.happenNext" @save="submit"></edit-block>
    <edit-benchmark :showEdit="showEdit"></edit-benchmark>
  </el-col>
  <el-col :span="12">
    <edit-block :showEdit="showEdit" title="Mission" :content.sync="detail.mission" @save="submit"></edit-block>
    <edit-block :showEdit="showEdit" title="Group Rules" :content.sync="detail.rules" @save="submit"></edit-block>
  </el-col>
</el-row>
</template>

<script>
import detailInfo from '@/views/modules/mspbots/peerGroup/peerGroupDetail/detailInfo'
import editBlock from '@/views/modules/mspbots/peerGroup/peerGroupDetail/detailBlock'
import editBenchmark from '@/views/modules/mspbots/peerGroup/peerGroupDetail/detailBenchmark'
export default {
  name: 'peerDetail',
  components: {
    editBlock,
    detailInfo,
    editBenchmark
  },
  data () {
    return {
      loading: false,
      detail: {}
    }
  },
  watch: {
    detail () {
    }
  },
  computed: {
    showEdit () {
      return !!(this.detail.currentUser && this.detail.currentUser.hasOwnProperty('type') && this.detail.currentUser.type === 0)
    },
    edit () {
      return !!this.$route.query.edit
    }
  },
  methods: {
    async getGroupDetail () {
      this.loading = true
      const params = {
        groupId: this.$route.query.groupId
      }
      const { getPeerGroupDetail } = this.$interface.system
      const { data } = await getPeerGroupDetail(params)
      if (data.code === 0) {
        this.detail = data.data
        this.$emit('getDetail', data.data)
      } else {
        this.$message.error(data.msg)
      }
      this.loading = false
    },
    async submit () {
      const { updatePeerGroup } = this.$interface.system
      const { data } = await updatePeerGroup(this.detail)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        await this.getGroupDetail()
      } else {
        this.$message.error(data.msg)
      }
    }
  },
  activated () {
    this.getGroupDetail()
  }
}
</script>

<style scoped lang="scss">
.detail {
  padding: 16px;
}
</style>
